<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8"/>
    <title>角色列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="description" content=""/>
    <meta name="keywords" content="coco bootstrap template, coco admin, bootstrap,admin template, bootstrap admin,"/>
    <meta name="author" content="Huban Creative"/>
    <link th:href="@{../../css/jquery-ui-1.10.4.custom.min.css}" rel="stylesheet" />
    <link th:href="@{../../css/bootstrap/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{../../css/font-awesome.min.css}" rel="stylesheet" />
    <link th:href="@{../../css/component.css}" rel="stylesheet" />
    <link th:href="@{../../css/datepicker.css}" rel="stylesheet" />
    <link th:href="@{../../css/summernote.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{../../css/sortable-theme-bootstrap.css}" rel="stylesheet" />
    <link th:href="@{../../css/all.css}" rel="stylesheet" />
    <link th:href="@{../../css/style.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{../../css/style-responsive.css}" rel="stylesheet" />
    <link th:href="@{../../css/datatable/dataTables.bootstrap.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{../../css/datatable/dataTables.tableTools.css}" rel="stylesheet" type="text/css" />
</head>

<body class="fixed-left">
<div id="wrapper">
    <!-- 顶部-->
    <div class="topbar">
        <!--顶部左-->
        <div class="topbar-left">
            <div class="logo">
                <h1><a href="#">北控国彩</a></h1>
            </div>
            <button class="button-menu-mobile open-left">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        <!--顶部右-->
        <div class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-collapse2">
                    <ul class="nav navbar-nav navbar-right top-navbar">
                        <!--通知-->
                        <li class="dropdown iconify hide-phone">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i><span class="label label-danger absolute">3</span></a>
                            <ul class="dropdown-menu dropdown-message">
                                <li class="dropdown-header notif-header"><i class="icon-mail-2"></i>新消息</li>
                                <li class="unread">
                                    <a href="#" class="clearfix">
                                        <img src="../../images/logo.png" class="xs-avatar ava-dropdown" alt="Avatar"/>
                                        <strong>John Doe</strong><i class="pull-right msg-time">5 minutes ago</i><br />
                                        <p>Duis autem vel eum iriure dolor in hendrerit ...</p>
                                    </a>
                                </li>

                            </ul>
                        </li>
                        <!--头像-->
                        <li class="dropdown topbar-profile">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="rounded-image topbar-profile-image"><img src="../../images/logo.png"/></span><strong><span th:text="${session.username}"></span></strong> <i class="fa fa-caret-down"></i></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">个人信息</a>
                                </li>
                                <li>
                                    <a href="#">修改密码</a>
                                </li>
                                <li>
                                    <a href="#">账户设置</a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#"><i class="icon-help-2"></i>帮助</a>
                                </li>
                                <li>
                                    <a class="md-trigger" data-modal="logout-modal" href="/logOut"><i class="icon-logout-1"></i>退出</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 左侧栏 -->
    <div class="left side-menu" style="background:#FFE4E1;">
        <div class="sidebar-inner slimscrollleft">
            <div class="clearfix"></div>
            <!--- 左上-->
            <div class="profile-info info_">
                <div class="col-xs-4">
                    <a href="profile.html" class="rounded-image profile-image"><img src="../../images/logo.png"/></a>
                </div>
                <div class="col-xs-8 text_">
                    <div class="profile-text">Hello,<b><span th:text="${session.username}"></span></b></div>
                </div>
            </div>
            <div class="clearfix"></div>
            <hr class="divider" />
            <div class="clearfix"></div>
            <!--左下 菜单栏-->
            <div id="sidebar-menu">
                <ul>
                    <shiro:hasPermission name="secManage">
                        <li class='has_sub'>
                            <a href='javascript:void(0);'><i class='icon-home-3'></i><span>安全中心</span>
                                <span class="pull-right"><i class="fa fa-angle-down"></i></span></a>
                            <ul>
                                <shiro:hasPermission name="userManage">
                                    <li>
                                        <a href='/user/userList'>
                                            <span>用户管理</span></a>
                                    </li>
                                </shiro:hasPermission>
                               <shiro:hasPermission name="roleManage">
                                    <li>
                                        <a href='/rolePermission/roleListIndex' class='active'><span>角色管理</span></a>
                                    </li>
                                </shiro:hasPermission>
                            </ul>
                        </li>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="accountCenter">
                        <li class='has_sub'>
                            <a href='javascript:void(0);'><i class='icon-home-3'></i><span>账户中心</span>
                                <span class="pull-right"><i class="fa fa-angle-down"></i></span></a>
                            <ul>
                                <shiro:hasPermission name="personalAcc">
                                    <li>
                                        <a href=''>
                                            <span>个人账户</span></a>
                                    </li>
                                </shiro:hasPermission>
                                <shiro:hasPermission name="retailerAcc">
                                    <li>
                                        <a href=''><span>商户账户</span></a>
                                    </li>
                                </shiro:hasPermission>
                                <shiro:hasPermission name="enterpriseAcc">
                                    <li>
                                        <a href=''><span>企业账户</span></a>
                                    </li>
                                  </shiro:hasPermission>
                            </ul>
                        </li>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="promotionManage">
                        <li class='has_sub'>
                            <a href='javascript:void(0);'><i class='icon-home-3'></i><span>福包管理</span>
                                <span class="pull-right"><i class="fa fa-angle-down"></i></span></a>
                            <ul>
                                <shiro:hasPermission name="generalBP">
                                    <li>
                                        <a href=''>
                                            <span>普通福包</span></a>
                                    </li>
                                </shiro:hasPermission>
                                <shiro:hasPermission name="advertiseBP">
                                    <li>
                                        <a href=''><span>广告福包</span></a>
                                    </li>
                                </shiro:hasPermission>
                                <shiro:hasPermission name="charityBP">
                                    <li>
                                        <a href=''><span>公益福包</span></a>
                                    </li>
                                </shiro:hasPermission>
                            </ul>
                        </li>
                     </shiro:hasPermission>
              <!--   <li class='has_sub'>
                     <a href='javascript:void(0);'><i class='icon-megaphone'></i><span>阿里</span> <span class="pull-right"><i class="fa fa-angle-down"></i></span></a>
                     <ul>
                         <li>
                             <a href='/grid1'><span>支付宝</span></a>
                         </li>
                         <li class='has_sub'>
                             <a href='javascript:void(0);'><span>蚂蚁森林</span> <span class="pull-right"><i class="fa fa-angle-down"></i></span></a>
                             <ul>
                                 <li>
                                     <a href='javascript:void(0);'><span>浇水</span></a>
                                 </li>
                             </ul>
                         </li>
                         <li class='has_sub'>
                             <a href='javascript:void(0);'><span>飞猪</span> <span class="pull-right"><i class="fa fa-angle-down"></i></span></a>
                             <ul>
                                 <li class='has_sub'>
                                     <a href='javascript:void(0);'><span>火车票</span> <span class="pull-right"><i class="fa fa-angle-down"></i></span></a>
                                     <ul>
                                         <li>
                                             <a href='javascript:void(0);'><span>买票</span></a>
                                         </li>
                                         <li>
                                             <a href='javascript:void(0);'><span>退票</span></a>
                                         </li>
                                     </ul>
                                 </li>
                             </ul>
                         </li>
                     </ul>
                 </li>-->
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>

    </div>
    <!--右侧栏-->
    <div class="content-page">
        <div class="content">
            <div class="page-heading">
                <h1><i class='fa fa-table'></i>角色列表</h1>
            </div>

            <div class="row">

                <div class="col-md-12">
                    <div class="widget">
                        <div class="widget-header">
                            <h2><strong>角色</strong>列表</h2>
                            <div class="additional-btn">
                                <a href="#" class="hidden reload"><i class="icon-ccw-1"></i></a>
                                <a href="#" class="widget-toggle"><i class="icon-down-open-2"></i></a>
                                <a href="#" class="widget-close"><i class="icon-cancel-3"></i></a>
                            </div>
                        </div>
                        <div class="widget-content">
                            <br/>
                            <div class="table-responsive">
                                <form class='form-horizontal' role='form'>
                                    <table id="datatables-2" class="table table-striped table-bordered" cellspacing="0" width="100%">
                                        <thead>
                                        <tr>
                                            <th>角色名称</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                           <tr th:each="role : ${roles}">
                                                <td th:text="${role.name}"></td>
                                                <td th:text="${role.deleted==1}? '不可用':'可用'"></td>
                                                <td>
                                                     <a data-toggle="tooltip" title="编辑" class="btn btn-default" style="margin-left: 10px;" th:href="@{'/rolePermission/roleSet/'+${role.id}}"><i class="fa fa-edit"></i></a>
                                                </td>
                                           </tr>
                                        </tbody>
                                    </table>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
<div class="md-overlay"></div>
<script>
    var resizefunc = [];
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script th:src="@{../../js/jquery/jquery-1.11.1.min.js}"></script>
<script th:src="@{../../js/bootstrap/bootstrap.min.js}"></script>
<script th:src="@{../../js/jquery/jquery-ui-1.10.4.custom.min.js}"></script>
<script th:src="@{../../js/detect.js}"></script>
<script th:src="@{../../js/fastclick.js}"></script>
<script th:src="@{../../js/jquery/jquery.slimscroll.js}"></script>
<script th:src="@{../../js/jquery/jquery-sparkline.js}"></script>
<script th:src="@{../../js/sortable.min.js}"></script>
<script th:src="@{../../js/bootstrap/bootstrap.file-input.js}"></script>
<script th:src="@{../../js/bootstrap/bootstrap-select.min.js}"></script>
<script th:src="@{../../js/icheck.min.js}"></script>
<script th:src="@{../../js/prettify.js}"></script>
<script th:src="@{../../js/init.js}"></script>
<script th:src="@{../../js/bootstrap/bootstrap-datepicker.js}"></script>
<script th:src="@{../../js/jquery/jquery.dataTables.min.js}"></script>
<script th:src="@{../../js/datatable/dataTables.bootstrap.js}"></script>
<script th:src="@{../../js/datatable/dataTables.tableTools.min.js}"></script>
<script th:src="@{../../js/datatable/datatables.js}"></script>
</body>

</html>